<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'

const animationTime = 10000
const seriesList = []
const datasetWithFilters = []


export default {
  name: "one",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    },
  },
  data() {
    return {
      params: {
        monthCnt: 60
      },
      chart: null,
      chartTimer: null,
      chartData: null,
      dataSet: [
        ["month", "totalNum", "succNum", "failNum"],
        ["202107", 2000, 1000, 1000],
        ["202108", 3000, 2000, 1000],
        ["202109", 4000, 3000, 1000],
        ["202110", 5000, 4000, 1000],
        ["202111", 6000, 5000, 1000],
        ["202112", 7000, 6000, 1000],
        ["202201", 8000, 7000, 1000],
        ["202202", 9000, 8000, 1000],
        ["202203", 8000, 7000, 1000],
        ["202204", 7000, 6000, 1000],
        ["202205", 6000, 5000, 1000]
      ],
      dataItems: ["totalNum", "succNum"]
      // dataItems : ["totalNum","succNum","failNum"]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.analyzeChartData()
      this.setOptions(this.dataSet)
    },
    analyzeChartData() {
      // echarts.util.each(this.orgNames, function (orgName) {
      this.dataItems.forEach(function (item) {
        console.log("analyzeChartDate each " + item);
        const datasetId = 'dataset_' + item;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                {dimension: 'month', gte: 202007}
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: true,
          smooth: true,
          name: item,
          // endLabel: {
          //   show: true,
          //   formatter: function (params) {
          //     return params.value[0] + ': ' + params.value[2];
          //   }
          // },
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value[2];
            },
            color: '#000',
          },
          lineStyle: {
            width: 4
          },
          labelLayout: {
            moveOverlap: 'shiftX'
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            opacity: 0.3,
          },
          encode: {
            // x: 'month',
            y: item,
            // label: ['month',item],
            // itemName: 'month',
            // tooltip: [item]
          }
        });
      });
    },
    setOptions(dataSource) {
      console.log("dataSource:" + dataSource)
      this.chart.clear()
      this.chart.setOption({
        animationDuration: animationTime,
        animationEasing: 'quadraticOut',
        // animationDuration: animationTime,
        // animationDurationUpdate: animationTime,
        // animationEasingUpdate: "linear", //数据更新动画缓动效果
        // animationEasing: 'linear',
        grid: {
          top: '3%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
          borderColor: '#FFF'
        },
        dataset: [
          {
            id: 'dataset_raw',
            source: dataSource
          },
          ...datasetWithFilters,
        ],

        tooltip: {
          show: true,
          trigger: 'item',
          extraCssText: 'width: 100px; height: 100px;font-size: 36px; font-family: Arial;font-weight: bold;',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            color: '#000',
            fontsize: 60
          }
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 20
          },
          splitLine: {
            lineStyle: {
              color: ['#c7c7c7'],
              width: 2
            }
          },
        },
        series: seriesList
      });
    }
  }
}
</script>

<style scoped>

</style>
